<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/base.css">
    <script src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/js/lib/jquery-1-cc52697ab1.10.2.js"></script>
    <script src="js/base.js"></script>
</head>
<body>

<div style="margin:100px;">
    <input id="email"/>
    <div id="e1" class="error"></div>
    <input id="pwd" type="password"/>
    <div id="e2" class="error"></div>
    <button id="regbtn">邮箱注册</button>
    <div id="tip"></div>
</div>


<script>
    //1. 当单击注册按钮时，判断两个文本框的值是否合法，如果合法提交给服务器处理
    regbtn.onclick = function () {
        var emailValue = email.value;
        var regReg = /^\w+@\w+(\.[a-zA-Z]{2,4}){1,2}$/; //不必要理解
        var emailRight = false;
        var pwdRight = false;

        if (emailValue.length == 0) {
            e1.innerHTML = "此项必填";
            emailRight = false;
        }else if(!regReg.test(emailValue)){
            e1.innerHTML = "邮箱号无效";
            emailRight = false;
        }else{
            e1.innerHTML = "";
            emailRight = true;
        }

        var pwdValue = pwd.value;
        var isWarn = false;

        if (pwdValue.length == 0) {
            e2.innerHTML = "此项必填";
            pwdRight = false;
        }else if (pwdValue.length < 6) {
            e2.innerHTML = "密码至少6位，支持数字、字母和符号";
            pwdRight = false;
        }else if(pwdValue.length<8){
            e2.innerHTML = "强度高的密码至少需要8个字符，同时包含大小写字母、数字和符号";
            e2.className = "warn";
            pwd.className = "warnbg";
            isWarn = true;
            pwdRight = true;
        }else{
            e2.innerHTML = "";
            pwdRight = true;
        }

        if(!isWarn){
            e2.className = "error";
            pwd.className = "";
        }

        //验证是否要给服务器发请求 1拦2延  拦的是不合法的数据，延迟对服务器请求
        if(emailRight&&pwdRight){
            ajax("/bijiuser/checktel",{tel:emailValue},function(data){
               if(data){
                   // 注册
                  ajax("/bijiuser/add",{tel:emailValue,pwd:pwdValue,accountType:1},function(data){
                      if(data){
                          tip.innerHTML = "注册成功！已经发送邮件到您的邮箱，请到邮箱激活您的帐号！";
                          setTimeout(function(){
                              location = "http://mail.qq.com";
                          },2000);
                      }else{
                          tip.innerHTML = "注册失败！";
                      }
                  }) ;
               }else{
                   e1.innerHTML = "此邮箱号已经注册！";
               }
            });
        }
    };

    //2. 当光标进入文本框时，消除对该文本框的错误提示
    email.onfocus = function(){
      e1.innerHTML = "";
    };

    pwd.onfocus = function(){
      e2.innerHTML = "";
    };

    //3. 关于密码框实时判断
    pwd.onkeyup = function(){
        var pwdValue = pwd.value;

        var isWarn = false;

        if (pwdValue.length == 0) {
            e2.innerHTML = "此项必填";
        }else if (pwdValue.length < 6) {
            e2.innerHTML = "密码至少6位，支持数字、字母和符号";
        }else if(pwdValue.length<8){
            e2.innerHTML = "强度高的密码至少需要8个字符，同时包含大小写字母、数字和符号";
            e2.className = "warn";
            pwd.className = "warnbg";
            isWarn = true;
        }else{
            e2.innerHTML = "";
        }

        if(!isWarn){
            e2.className = "error";
            pwd.className = "";
        }

    }
</script>
</body>
</html>
